<template lang="pug">
.wrap
  .top
    span.goBack  <
    span.title {{infor.title}}
  Bscroll.content
    .cont-wrap
      .swipe
        img(:src="infor.picPath")
      .cont 
        .goods-infor
          p.title {{infor.title}}
          .count-infor 
            p.price {{"￥"+infor.price}}
            p.count
              span.productSum 剩余库存：{{infor.productSum}}
              span.sale-count 累计售出：{{infor.soldCount}}
        p.judge 商品评价
          span.goJudeg {{infor.retailPrice}}条评价
            span >
        .business-infor
          img(:src="infor.shopInfo.shopPicUrl")
          dl
            dt {{infor.shopInfo.shopName}}
            dd 全部商品 {{infor.shopInfo.shopProductCount}} 
      .goods-details(v-if="infor.pics")
        img(:src="item" v-for="item in infor.pics" :key="item")
  cart
</template>

<script>
import cart from '@/components/cart'
// import heads from "@/components/head";
import Bscroll from '@/components/bscroll'
export default {
  name: "goodsdetails",
  data() {
    return {
      infor: {
        activeEndTime: "",
        activeFirstOrNum: "",
        activeId: 0,
        activeNewUser: "",
        activePrice: "",
        activeStartTime: "",
        activeTitle: "",
        activeType: 0,
        appSpreadContent: "",
        appointmentTime: "",
        checkFlag: "",
        commentCount: 0,
        createDate: "2017-06-23 16:41:16",
        createTimeASE: "",
        detail: "",
        groundingstate: 1,
        groupBuyingCount: "0",
        groupBuyingList: [],
        groupCount: "0",
        groupId: 17131,
        groupPeopleNum: "",
        groupPriceRange: "",
        groupProductId: "0",
        groupTotalNum: "0",
        haveAppSpread: 0,
        haveAppSpreadPrivilege: 0,
        iconUrl:
          "http://cms.apppark.cn/app/update/user/533357/1531790906558_517587.png",
        id: 170514,
        isFavorite: 0,
        isGroupBuy: "0",
        isHaveGroup: "",
        isImmediatelyBuy: 0,
        isPlantActive: 0,
        isPlus: 0,
        isRebate: "0",
        isSellOut: "0",
        isShowRecommoned: -1,
        isStandard: 0,
        isVirtual: 0,
        limitNumber: 0,
        mainPara:
          "%3C%21DOCTYPE%3E%3Chtml%3E%3Chead%3E%3Cmeta+charset%3D%22utf-8%22+%2F%3E%3Cmeta+content%3D%22width%3Ddevice-width%2C+initial-scale%3D1.0%2C+maximum-scale%3D1.0%2C+user-scalable%3D0%22+name%3D%22viewport%22+%2F%3E%3Cmeta+content%3D%22telephone%3Dno%22+name%3D%22format-detection%22+%2F%3E%3Cmeta+content%3D%22yes%22+name%3D%22apple-mobile-web-app-capable%22+%2F%3E%3Cmeta+content%3D%22black%22+name%3D%22apple-mobile-web-app-status-bar-style%22+%2F%3E%3Ctitle%3E%E5%9B%BD%E7%89%8C%E7%89%B9%E7%BA%A7%E6%BD%AE%E5%B7%9E%E5%87%A4%E5%87%B0%E5%8D%95%E6%9E%9E%E8%8C%B6%E5%8F%B6+%E9%BB%84%E6%9E%9D%E9%A6%99%E5%8D%95%E4%B8%9B%E6%98%A5%E8%8C%B6%E8%9C%9C%E5%85%B0%E9%A6%99%E6%B8%85%E9%A6%99%E5%85%AB%E4%BB%99%E8%8C%B6250%E5%85%8B%3C%2Ftitle%3E%3Cstyle+type%3D%22text%2Fcss%22%3E%2F*public*%2Fbody+%7Bbackground%3A+%23fff%3Bpadding%3A+5px+8px%3Bmargin%3A0%3Btext-align%3A+justify%3Btext-justify%3A+inter-ideograph%3B+font-family%3AHelvetica%2Csans-serif%3B%7D.content+p+%7Bline-height%3A+1.56%3Bmargin%3A+10px+0%3Bfont-size%3A+18px%3Bcolor%3A+%23232323%3B%7D.content+img%7Bmax-width%3A100%25%3B%7D.viedoImg%7Bdisplay%3Ablock%3Bwidth%3A100%25%3Bheight%3A180px%3Bbackground%3A%23f5f2f0+url%28%27http%3A%2F%2Fwww.apppark.cn%2Fimages%2Fvideo.png%27%29+center+no-repeat%3B%7D%3C%2Fstyle%3E%3C%2Fhead%3E%3Cbody%3E%3Cdiv+class%3D%22content%22%3E%3Cp%3E%3Cimg+src%3D%22http%3A%2F%2Fcms.apppark.cn%2Fapp%2F%2Fupload%2F10656189%2F20170623%2F15641498207262179.jpg%22+style%3D%22float%3Anone%3B%22+title%3D%223.jpg%22+%2F+onclick%3D%22window.jsclick.showImage%280%2Cthis.src%29%22%3E%3C%2Fp%3E%3Cp%3E%3Cimg+src%3D%22http%3A%2F%2Fcms.apppark.cn%2Fapp%2F%2Fupload%2F10656189%2F20170623%2F20471498207262256.jpg%22+style%3D%22float%3Anone%3B%22+title%3D%224.jpg%22+%2F+onclick%3D%22window.jsclick.showImage%281%2Cthis.src%29%22%3E%3C%2Fp%3E%3Cp%3E%3Cimg+src%3D%22http%3A%2F%2Fcms.apppark.cn%2Fapp%2F%2Fupload%2F10656189%2F20170623%2F71691498207262303.jpg%22+style%3D%22float%3Anone%3B%22+title%3D%225.jpg%22+%2F+onclick%3D%22window.jsclick.showImage%282%2Cthis.src%29%22%3E%3C%2Fp%3E%3Cp%3E%3Cbr+%2F%3E%3C%2Fp%3E%3C%2Fdiv%3E%3Cscript+src%3D%22http%3A%2F%2Fcms.apppark.cn%2Fjs%2Fjquery-1.7.2.min.js%22%3E%3C%2Fscript%3E%3Cscript+src%3D%22http%3A%2F%2Fcms.apppark.cn%2Fjs%2Fjquery.lazyload.js%22%3E%3C%2Fscript%3E%3Cscript%3E%09%24%28function%28%29+%7B+var+u+%3D+navigator.userAgent%3B+if%28u.indexOf%28%27Android%27%29+%3E+-1+%7C%7C+u.indexOf%28%27Linux%27%29+%3E+-1%29%7B%09++++%24%28%22.content+img%22%29.lazyload%28%7B%09%09placeholder+%3A+%22http%3A%2F%2Fcms.apppark.cn%2F%2Fcss%2Fimages%2Fajax_loader.gif%22%2C+%09%09effect+%3A+%22fadeIn%22%7D%29%7D%09%7D%29%3B%3C%2Fscript%3E%3C%2Fbody%3E%3C%2Fhtml%3E",
        makeAnAppointment: 0,
        makeAnAppointmentDate: 0,
        match: 1,
        oriPrice: "0.00",
        picPath: "http://cms.apppark.cn/app/p_images/17131/1498207251063.jpg",
        pics: [
          "http://cms.apppark.cn/app//upload/10656189/20170623/15641498207262179.jpg",
          "http://cms.apppark.cn/app//upload/10656189/20170623/20471498207262256.jpg",
          "http://cms.apppark.cn/app//upload/10656189/20170623/71691498207262303.jpg",
        ],
        plusPrice: 0,
        plusPriceRange: "",
        postage: 0,
        price: "200.00",
        priceRange: "",
        priceTagUrl: "",
        productPic:
          "http://cms.apppark.cn/app/p_images/17131/1498207254086.jpg;http://cms.apppark.cn/app/p_images/17131/1498207255779.jpg",
        productSum: 6663,
        rackRate: 0,
        recommonedTitle: "",
        resultMaxPrice: "",
        resultMinPrice: "0",
        retFlag: "1",
        retMsg: "获取产品成功",
        retailPrice: 0,
        serviceHeadFace:
          "http://cms.apppark.cn/app/upload/10514741/20180321162155_316.png",
        serviceId: 533357,
        serviceJIDUserName: "10656189_533357_1",
        serviceName: "林坚龙",
        serviceOpenState: 1,
        serviceUserNickName: "客服",
        shareUrl:
          "http://h5.isharead.com//ckj/product_shareIt.action?product.id=170514&amp;appId=10656189",
        shopAddress: "",
        shopInfo: {
          isGroupInfoShow: 1,
          style_groupInfoShow: 0,
          groupId: 17131,
          shopProductCount: 4,
          shopName: "人人茶馆（宝安店）",
          sys_modelType: 0,
          shopPicUrl:
            "http://cms.apppark.cn/app/upload/10656189/20171128153050_740.jpg",
          style_tabPosition: 1,
        },
        shopLocation: "",
        shopPhone: "",
        showName: "",
        soldCount: 6,
        standard: null,
        standardRelation: [],
        title: "国牌特级潮州凤凰单枞茶叶 黄枝香单丛春茶蜜兰香清香八仙茶250克",
        totalProduct: "0",
        type: 0,
        useRule: "",
        useTime: "",
        validDate: "",
        virtualEndTime: "",
        virtualEndTimeSlot: "",
        virtualEndTimeSlotSrc: "",
        virtualEndTimeSrc: "",
        virtualStartTime: "",
        virtualStartTimeSlot: "",
        virtualStartTimeSlotSrc: "",
        virtualStartTimeSrc: "",
        virtualTimeSlot: "",
        virtualUseEffectivedata: 0,
        virtualUseRule: "",
        virtualUseTime: "",
        weight: 0,
      },
    };
  },
  components: {
    // heads,
    Bscroll,
    cart
  },
};
</script>

<style scoped lang="scss">
$gray:#949494;
.content {
  height: calc(100vh - .76rem - 1rem);
  overflow: hidden;
}
.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #f4f4f3;
  .top {
    font-size: .3rem;
    height: .76rem;
    line-height: .76rem;
    color:white;
    background: #363636;
    .title {
      display: inline-block;
      width: 80%;
      white-space:nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      margin-left: 10%;
      font-size: .26rem;
    }
  }
  .swipe {
    img {
      width: 100%;
      height: 6.07rem;
    }
  }
  .cont {
    .goods-infor {
      padding: 0 .3rem;
      background: #fff;
      .title {
        height: 1.21rem;
        font-size:.24rem ;
        display: flex;
        align-items: center;
        border-bottom:1px solid #f8f8f8;
      }
      .count-infor {
        display: flex;
        flex-direction: column;
        height: 1.34rem;
        justify-content: space-around;
        border-bottom:1px solid #f8f8f8;
        .price {
          color:red;
          font-size: 0.2rem;
        }
        .count {
          font-size: .2rem;
          color:$gray;
          span+span {
            margin-left: .4rem;
          }
        }
      }  
    }
    .judge {
      height: .72rem;
      line-height: .72rem;
      border:1px solid #f8f8f8;
      border-width: 1px 0;
      color:$gray;
      font-size: .22rem;
      padding:0 .3rem;
      margin:.26rem 0;
      background: #fff;
      .goJudeg {
        float: right;
        span {
          margin-left: .1rem;
        }
      }
    }
    .business-infor {
      background: #fff;
      height: 1.36rem;
      display: flex;
      align-items: center;
      padding:0 .3rem;
      img {
        width: 0.64rem;
        height: 0.64rem;
      }
      dl {
        margin-left: .2rem;
        dt {
          font-size: .22rem;
          color:#6c6c6c;
        }
        dd {
          font-size: .2rem;
          color:#acacac;
        }
      }
    }
    
  }
  .goods-details {
    background: #fff;
    padding:0 .08rem;
    img {
      width: 100%;
      margin-top:.1rem;
    }
  }
}
.goBack {
  float: left;
  margin-left: 0.3rem;
}
</style>